<div class="widget-box {{ collapsed }}">
    <div class="widget-header widget-header-small header-color-{{ list_item_type.lower() }}">
        <h5 id="items_header" class="smaller"></h5>

        <div class="widget-toolbar">
            {% if has_permission('Create_'+list_item_type) and  add_button_address %}

                &nbsp
                <a data-target="#dialog_template"
                   data-toggle="modal"
                   data-keyboard=false
                   href="{{ add_button_address }}"
                   class="white">
                    <i class="icon-plus"></i>
                    {% if add_button_title %}
                        {{ add_button_title }}
                    {% else %}
                        New
                    {% endif %}
                </a>
                &nbsp&nbsp

            {% endif %}
            <a href="#" data-action="collapse">
                <i class="icon-chevron-down"></i>
            </a>
        </div>

    </div>
    <div class="widget-body">
        <div class="widget-main no-padding">
            <div id="loading_spinner" class="well well-sm">

                <div class="inline middle blue bigger-110"><i
                        class="icon-spinner icon-spin orange bigger-125"></i>
                    Loading
                    content...
                </div>
            </div>

            <table id="items_table"
                   class="table table-striped table-bordered table-hover hide">

                <thead>

                </thead>

                <tbody>

                </tbody>

            </table>

        </div>
    </div>
</div>


<script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.min.js") }}'></script>
<script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.bootstrap.js") }}'></script>
<script src='{{ request.static_url("stalker_pyramid:static/stalker/js/dataTable_num-html_sort.js") }}'></script>


<script>
    $(document).ready(function () {

        var icon_name = get_icon('{{ list_item_type.lower() }}');
        $('#items_header').append('<i class="' + icon_name + ' bigger-125"></i>');

        {% if collapsed %}
            $('#items_header').append('<small class="white">List of {{ list_item_type }}s</small>')
        {% endif %}



        var loadTableData = function (address, tableId,tableParams,sortingParams) {

            console.log('loadTableData' + address)
            // fill items table with dynamic data
            $.getJSON(address).then(function (data) {

                var thead_template = doT.template($('#tmpl_itemThead').html());
                var table_head = $('#' + tableId + '>thead');
                table_head.append(thead_template({}));

                var items = data;
                var row_template = doT.template($('#tmpl_itemRow').html());

                console.log('data loded' + address)


                // wait until document is ready
                $(function () {

                    var i;
                    var table_body = $('#' + tableId + '>tbody');
                    for (i = 0; i < data.length; i++) {


                        if (data[i].date_created) {
                            data[i].date_created = new Date(data[i].date_created).format('yyyy-mm-dd HH:MM');
                        }

                         console.log('data loded' + data[i].thumbnail_full_path)

                        if (data[i].thumbnail_full_path == null) {
                            data[i].thumbnail_full_path = '{{ request.static_url("stalker_pyramid:static/stalker/images/T_NO_IMAGE.gif") }}';
                        }
                        else {
                            data[i].thumbnail_full_path = '/' + data[i].thumbnail_full_path;
                        }

                        console.log('data loded' + data[i].thumbnail_full_path)

                        data[i].came_from = '{{ request.current_route_path() }}'

                        // append it to the table
                        table_body.append(row_template(data[i]));
                    }

                    var oTable1 = $('#' + tableId).dataTable(tableParams);
                    oTable1.fnSort(sortingParams);

                    $('#' + tableId).show();
                    $('#loading_spinner').hide();
                });
            });
        }

        loadTableData(
                tableDataAddress,
                "items_table",
                tableParameters,
                sortingParameters);
    });
</script>
